<script setup>
import { ref } from 'vue';

const vA清除 = {
  mounted: (el) => console.log(`el👉`, el),
  updated(el, binding, vnode, prevVnode) {
    console.log(`el updated👉`, el)
  },
}
const 标题 = ref()
const 输入框el = ref()
function 失焦() {
  console.log("失去焦点", 输入框el.value);
  console.log("失去焦点", 输入框el.value.getNativeElement());

}
// function 输入框input(e){
//   console.log("输入框input",e.target.value);
// }
function 输入框input() {
  console.log("输入框input", e.target.value);
}
const 是否显示清除按钮 = ref(true)

const blur = (event) => {
  是否显示清除按钮.value = false
};
const focus = (event) => {
  是否显示清除按钮.value = true
  // event.target.value 包含了输入框的当前值
  console.log('event:', event);
  console.log('event:', event.target.value);
  if (event.target.value == "") {
    console.log(`还没输入东西👉`)
    // 是否显示清除按钮.value=false
  }
  // 如果你想更新一个响应式变量
  // myValue.value = event.target.value;
};
const focus1 = (event) => {
  是否显示清除按钮.value = true
  // event.target.value 包含了输入框的当前值
  console.log('event:', event);
  console.log('event:', event.target.value);
  if (event.target.value == "") {
    console.log(`还没输入东西👉`)
    // 是否显示清除按钮.value=false
  }
  // 如果你想更新一个响应式变量
  // myValue.value = event.target.value;
};
const update_model = (event) => {
  // event.target.value 包含了输入框的当前值
  console.log('Input value:', event);
  if (event == "") {
    console.log(`还没输入东西👉`)
    // 是否显示清除按钮.value=false
  }
  // 如果你想更新一个响应式变量
  // myValue.value = event.target.value;
};
</script>

<template>
  <q-card>
    <q-card-section class="bg-accent text-white">
      <div class="text-h6">去掉输入框的X：</div>
    </q-card-section>
    <q-separator inset />
    <q-card-section>
      <div class="row q-gutter-lg q-mt-lg">
        <!-- <q-input v-model="标题" v-a清除 clearable placeholder="失去焦点触发事件" /> -->
        <q-input v-model="标题" :clearable="是否显示清除按钮" @update:model-value="update_model" />
        <q-input prefix="标题 : " v-model="标题" label="Label" :clearable="是否显示清除按钮" @focus="focus" @blur="blur"
          placeholder="失去焦点去掉清除符合">
          <!-- <template v-slot:prepend>
            标题
          </template> -->
        </q-input>
        <q-input v-model="标题" type="text" label="Label" clearable />
        <q-input v-model="标题" label="标题:" :clearable="是否显示清除按钮" @focus="focus" @blur="blur" placeholder="失去焦点去掉清除符合">
        </q-input>
      </div>
      <div class="row q-gutter-lg q-mt-lg">
        <q-input v-model="标题" label="标题:" :clearable="是否显示清除按钮" @focus="focus" @blur="blur" placeholder="失去焦点去掉清除符合">
        </q-input>
      </div>
    </q-card-section>
  </q-card>
</template>

<style scoped>
::v-deep .q-field__label {
  flex: 0 0 auto;
  margin-right: 5px;
  transform: none !important;
  order: 1;
  position: relative;
}

::v-deep .q-field__native {
  order: 999;
}
</style>
